<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src='../../packages/core/dist/index.global.js'></script>
<script src='../../packages/web-component/dist/index.global.js'></script>
<script src='../../packages/interaction/dist/index.global.js'></script>
<script src='../../packages/daygrid/dist/index.global.js'></script>
<script src='../../packages/timegrid/dist/index.global.js'></script>
<script src='../../packages/list/dist/index.global.js'></script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 10px;
  }

</style>
</head>
<body>

  <div id='calendar-container'>
    <full-calendar shadow options='{
      "headerToolbar": {
        "left": "prev,next today",
        "center": "title",
        "right": "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
      },
      "initialDate": "2023-01-12",
      "editable": true,
      "selectable": true,
      "businessHours": true,
      "dayMaxEvents": true,
      "events": [
        {
          "title": "All Day Event",
          "start": "2023-01-01"
        },
        {
          "title": "Long Event",
          "start": "2023-01-07",
          "end": "2023-01-10"
        },
        {
          "groupId": 999,
          "title": "Repeating Event",
          "start": "2023-01-09T16:00:00"
        },
        {
          "groupId": 999,
          "title": "Repeating Event",
          "start": "2023-01-16T16:00:00"
        },
        {
          "title": "Conference",
          "start": "2023-01-11",
          "end": "2023-01-13"
        },
        {
          "title": "Meeting",
          "start": "2023-01-12T10:30:00",
          "end": "2023-01-12T12:30:00"
        },
        {
          "title": "Lunch",
          "start": "2023-01-12T12:00:00"
        },
        {
          "title": "Meeting",
          "start": "2023-01-12T14:30:00"
        },
        {
          "title": "Happy Hour",
          "start": "2023-01-12T17:30:00"
        },
        {
          "title": "Dinner",
          "start": "2023-01-12T20:00:00"
        },
        {
          "title": "Birthday Party",
          "start": "2023-01-13T07:00:00"
        },
        {
          "title": "Click for Google",
          "url": "http://google.com/",
          "start": "2023-01-28"
        }
      ]
    }' />
  </div>

</body>
</html>
